<template>
  <!--巨幕  :class="this.$store.state.isIndex ? 'index-bg' : 'no-index-bg'"-->
  <div 
    id="masthead" 
    class="ui vertical masthead center aligned segment"
    :style="{'background': 'url('+ imgUrl +') center no-repeat'}"
  >
    <!-- 页面信息 -->
    <div id="site-info" v-if="page == 1">
      <h2 class="site_title">{{pageTitle}}</h2>
    </div>
    <!-- 博客详情页 -->
    <div id="page-info" v-else-if="page == 2">
      <div class="page-title">{{pageTitle}}</div>
      <div class="page-mate">
        <div class="firstline">
          <Icon type="md-create" />
          <span>发表于{{getCreateTime}}</span>
          <span class="separator">|</span>
          <Icon type="md-build" />
          <span>更新于{{getUpdateTime}}</span>
        </div>
        <div class="secondline">
          <Icon type="ios-bookmarks" />
          <router-link :to="'/category/' + type.id">{{type.name}}</router-link>
          <span class="separator">|</span>
          <Icon type="ios-paper" />
          <span v-if="wordCount < 1000">{{wordCount}}</span>
          <span v-else>{{changeShow(wordCount)}}</span>
          <span>字</span>
          <span class="separator">|</span>
          <Icon type="md-eye" />
          <span>{{views}}</span>
          <span>次</span>
          <span class="separator">|</span>
          <Icon type="md-chatboxes" />
          <span v-if="comments !== 0">{{comments}}</span>
          <span v-else>暂无评论</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from 'utils/utils'

export default {
  name: 'Masthead',
  props: {
    imgUrl: String,
    pageTitle: String,
    page: Number,
    createTime: String,
    updateTime: String,
    type: {},
    wordCount: Number,
    views: Number,
    comments: Number
  },
  computed: {
    getCreateTime() {
      return formatDate(new Date(this.createTime), "yyyy-MM-dd")
    },
    getUpdateTime() {
      return formatDate(new Date(this.updateTime), "yyyy-MM-dd")
    },
    
  },
  methods: {
    changeShow(wordCount) {
      return (wordCount / 1000).toFixed(1) + 'k'
    }
  },
};
</script>

<style lang='scss' scoped>
#masthead {
  position: relative !important;
  background-size: cover !important;
  background-color: #28cfcfd9 !important; 
  height: 40vh !important;
  #site-info {
    position: absolute;
    top: 45%;
    padding: 0 0.5rem;
    margin: 0;
    width: 100%;
    font-size: 1.5rem;
    color: #fff;
    text-align: center;
  }
  #page-info {
    position: absolute;
    bottom: 1rem;
    width: 100%;
    max-width: 800px;
    padding: 0 1rem;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    .page-title {
      margin-bottom: 0.4rem;
      font-size: 2rem;
    }
    .page-mate {
      font-size: 1rem;
      line-height: 27px;
      i {
        padding-right: 5px;
      }
      a {
        color: #fff;
        &:hover {
          color: #2d8cf0;
          text-decoration: underline;
        }
      }
      .separator {
        margin: 0 5px;
      }
    }
  }
}
@media screen and (max-width: 600px) {
  #masthead #page-info .page-mate {
    font-size: 0.8rem;
    line-height: 22px;
  }
}
</style>